.is-group-editor::before {
	content: '';
	position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	background-color: $white;
	pointer-events: none;
	z-index: z-index( 'root', '.is-group-editor::before' );
}

.is-group-editor .sidebar {
	left: auto;
	right: -273px;
}

@include breakpoint( "<660px" ) {
	.is-group-editor.focus-sidebar::before {
		background-color: lighten( $gray, 30% );
	}
}

.is-group-editor .layout__content {
	padding: 47px 0 0;
	overflow: inherit;
}

.post-editor__inner {
	position: relative;
	top: 47px;

	@include breakpoint( "<660px" ) {
		overflow-x: hidden;
		margin-bottom: 47px;
		border-bottom: 1px solid lighten( $gray, 20 );
	}
}

.post-editor__content {
	position: relative;
	margin: 0;
	backface-visibility: hidden;
	perspective: 1000;
	display: none;

	.focus-content & {
		display: block;
	}

	@include breakpoint( ">660px" ) {
		display: block;
		backface-visibility: visible;
		perspective: none;
	}
}

.post-editor__content {
	margin: 0 auto; // born centered, so when width collapses for sidebar anim it doesn't move
	left: 0;

	.focus-sidebar & {
		@include breakpoint( ">960px" ) {
			left: ( $sidebar-width-max / -2 );
			width: calc( 100% - ( #{ $sidebar-width-max } ) ); // subtract sidebar width
		}

		@include breakpoint( "<960px" ) {
			left: ( $sidebar-width-min / -2 );
			width: calc( 100% - ( #{ $sidebar-width-min } ) ); // subtract sidebar width
		}
	}
}

.post-editor__site {
	display:  flex;
	background: lighten( $gray, 30% );

	@include breakpoint( ">660px" ) {
		display: none;
	}

	.site__content {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.site__title,
	.site__domain {
		&::after {
			@include long-content-fade( $color: lighten( $gray, 30% ) );
		}
	}

	.editor-status-label {
		text-align: right;
		align-self: center;
		margin-right: 8px;
	}
}

.editor__header,
.editor .mce-container-body,
.editor .tinymce {
	max-width: 100%;
	margin: 0 auto;

	@include breakpoint( ">960px" ) {
		width: 700px;
	}
}

.focus-content .editor__header {
	@include breakpoint( ">660px" ) {
		width: 700px;
	}
}

.editor__header,
.editor .mce-edit-area {
	padding: 0 16px;

	@include breakpoint( ">1040px" ) {
		padding: 0;
	}
}

.post-editor .draft .post-relative-time-status {
	display: none;
}

// Component <Editor>
.editor {
	position: relative;
}

.editor .editor-notice .notice {
	@include breakpoint( ">660px" ) {
		margin: 0;
	}
}

.editor .tinymce {
	min-height: 100vh;
	resize: none;
	border-width: 0;
	padding: 32px 11px; /* Inherited from TinyMCE iframe body */

	// typography for HTML view
	font-family: $monospace;
	font-size: 14px;
	margin-bottom: 64px;

	@include breakpoint( "<480px" ) {
		padding: 24px 27px; /* 27px = 16px + the 11px padding on Visual mode */
		margin-bottom: 0;
	}

	&:focus {
		border-color: lighten( $gray, 20% );
		box-shadow: none;
	}
}

.editor__header {
	position: relative;
	padding-bottom: 27px;
}

.editor__switch-mode {
	position: absolute;
		right: 16px;
	width: 160px;
	z-index: z-index( 'root', '.editor__switch-mode' );

	@include breakpoint( ">960px" ) {
		right: 32px;
	}

	@include breakpoint( ">1040px" ) {
		right: 0;
	}
}

.editor__switch-mode .segmented-control__item {
	&:first-of-type {
		.segmented-control__link {
			border-bottom-left-radius: 0;
		}
	}

	&:last-of-type {
		.segmented-control__link {
			border-right-color: lighten( $gray, 20% );
			border-bottom-right-radius: 0;
		}
	}

	&.is-selected {
		+ .segmented-control__item .segmented-control__link {
			border-left-color: lighten( $gray, 20% );
		}
	}
}

.editor__switch-mode .segmented-control__link {
	background: $gray-light;
	border-color: lighten( $gray, 20% );
}

.editor__switch-mode .segmented-control__item.is-selected .segmented-control__link {
	border-color: lighten( $gray, 20% );
	border-bottom-color: $white;
	background-color: $white;
}

.editor__header-divider {
	background-color: lighten( $gray, 25% );
	max-width: 700px;
	margin: 0 auto;

	& ~ .mce-tinymce {
		margin-top: -1px;
	}
}

.post-editor .drafts__list + .infinite-scroll-end::after {
	background-color: lighten( $gray, 30% );
}

.post-editor .draft {
	padding: 16px;
}

.editor .editor-featured-image {
	display: none;
	border-bottom: 1px solid lighten( $gray, 20 );
	border-top: 1px solid lighten( $gray, 20 );
	box-shadow: inset 0 0 2px 2px rgba( lighten( $gray, 10 ), 0.1 );
	background: rgba( lighten( $gray, 30 ), 0.3 );

	overflow: hidden;

	&.is-assigned {
		display: block;

		@include breakpoint( ">660px" ) {
			margin: -24px 0 24px;
		}
	}

	img {
		margin: 0 auto;
		max-height: 400px;
	}
}

.post-editor__confirmation-dialog.is-narrow {
	max-width: 100%;
	border-radius: 0;

	@include breakpoint( ">660px" ) {
		max-width: 550px;
		border-radius: 3px;
	}
}

.post-editor__confirmation-dialog-heading {
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 4px 0;
}

.post-editor__confirmation-dialog-heading.is-variable-height {
	height: auto;
}

.post-editor__confirmation-dialog-email,
.post-editor__confirmation-dialog-explanation,
.post-editor__confirmation-dialog-reasoning {
	color: darken( $gray, 30 );
	margin: 0 0 8px 0;
}

.post-editor__confirmation-dialog-email {
	margin-bottom: 16px;
	color: darken( $gray, 10 );
}

.post-editor__confirmation-dialog-email-wrapper {
	display: inline-block;
	max-width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 5px;
	vertical-align: bottom;
}

.post-editor__confirmation-dialog-reasoning {
	color: darken( $gray, 10 );
	font-size: 14px;
	margin-bottom: 24px;
}

.post-editor__confirmation-dialog-spinner {
	display: inline-block;
	vertical-align: -25%;
}
